<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-30 18:46:31
-->
<template>
  <DvBorderBox12>
    <div class="left">
      <v-chart :option="getOptions()" autoresize></v-chart>
    </div>
  </DvBorderBox12>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useEchartsStore } from '@/stores/echarts'
import { BorderBox12 as DvBorderBox12 } from '@kjgl77/datav-vue3'
const props = defineProps<{
  activeIndex: string
}>()

const echartsStore = useEchartsStore()

const orderFullYearAxis = computed(() => {
  return echartsStore.echartsData.orderFullYearAxis
})
const orderFullYear = computed(() => {
  return echartsStore.echartsData.orderFullYear
})
const userFullYearAxis = computed(() => {
  return echartsStore.echartsData.userFullYearAxis
})
const userFullYear = computed(() => {
  return echartsStore.echartsData.userFullYear
})

const getOptions = () => {
  return {
    title: {
      text: props.activeIndex === '1' ? '销售趋势' : '访问趋势',
      textStyle: {
        color: 'aqua',
        fontSize: 12,
      },
      top: 5,
      left: 20,
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 50,
      bottom: 30,
      left: 50,
      right: 8,
    },
    xAxis: {
      data:
        props.activeIndex === '1'
          ? orderFullYearAxis.value
          : userFullYearAxis.value || [],
      axisLabel: {
        color: '#aaa',
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      axisLabel: {
        color: '#aaa',
      },
      splitLine: {
        show: false,
      },
    },
    series: {
      name: props.activeIndex === '1' ? '销售趋势' : '访问趋势',
      type: 'bar',
      data:
        props.activeIndex === '1'
          ? orderFullYear.value
          : userFullYear.value || [],
      barWidth: '40%',
      color: 'skyblue',
      labelLine: false,
    },
  }
}
</script>

<script lang="ts">
export default {
  name: 'MiddleLeft',
}
</script>

<style lang="scss" scoped>
.left {
  height: 160px;
}
</style>
